<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: blue;
            width: 400px;
            height: 400px;
        }

        .son {
            /* position: relative; */
            width: 200px;
            height: 200px;
            background-color: pink;
            /* top: 50%; */
            /* left: 50%; */
            /* transform: translate(-50%, -50%); */

        }
    </style>
</head>

<body>
    <div class="father">
        <div class='son'></div>
    </div>
    <script>
        // 依赖注入  复杂组件间传值   
        // provide: function () {
        //     return {
        //         data
        //     }
        // }

        /*
        1. computed 和 watch 的区别？
        computed 根据data中的数据 动态计算出一个新的属性  计算属性必须有返回值
        watch 监听data中的某个数据发生变化 

        2. vue中的插槽分为具名插槽 匿名插槽  作用域插槽
        通过插槽可以动态指定某一个组件模板部分的渲染

        3. v-show : 通过css方式控制元素显示隐藏
           v-if ： 通过判断条件是否成立决定是否要创建元素

        4. 
        */


        // function fun() {
        //     let n = 10
        //     if (true) {
        //         // let 声明 有{} 作用域限制
        //         let n = 100
        //     }
        //     console.log(n);
        // }
        // fun()
        // var str = 'asdasdasdasdasd'
        // includes返回布尔值  表示是否找到参数字符串
        // console.log(str.includes('sd'));

        let arr = [20, 30, 15, 12, 16, 60, 80]
        let temp = null
        for (var i = 0; i < arr.length - 1; i++) {
            for (var j = 0; j < arr.length - i - 1; j++) {
                if (arr[j] > arr[j + 1]) {
                    temp = arr[j]
                    arr[j] = arr[j + 1]
                    arr[j + 1] = temp
                }
            }
        }
        console.log(arr);
    </script>
</body>

</html>